import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text('资质上传')),
      body: SingleChildScrollView(child: ImageUploadWidget()),
    ),
  ));
}

class ImageUploadWidget extends StatefulWidget {
  @override
  _ImageUploadWidgetState createState() => _ImageUploadWidgetState();
}

class _ImageUploadWidgetState extends State<ImageUploadWidget> {
  final ImagePicker _picker = ImagePicker();
  final List<XFile?> _imageFiles = [null]; // 初始化一个空的图片上传区域
  final List<String> _imageNames = ['']; // 初始化一个空的资质名称输入框

  // 添加或更换图片
  Future<void> _pickImage(int index) async {
    final XFile? pickedFile = await _picker.pickImage(source: ImageSource.gallery);
    if (pickedFile != null) {
      setState(() {
        _imageFiles[index] = pickedFile;
      });
    }
  }

  // 删除图片
  void _removeImage(int index) {
    setState(() {
      _imageFiles.removeAt(index);
      _imageNames.removeAt(index);
    });
  }

  // 保存图片名称
  void _saveImageName(int index, String name) {
    setState(() {
      _imageNames[index] = name;
    });
  }

  // 构建图片上传区域
  Widget _buildImageUploadArea(int index) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            GestureDetector(
              onTap: () => _pickImage(index), // 点击触发图片选择
              child: Container(
                margin: const EdgeInsets.all(10),
                child: _imageFiles[index] == null
                    ? const Icon(Icons.add, size: 50)
                    : Image.file(File(_imageFiles[index]!.path), width: 200, height: 200, fit: BoxFit.cover),
              ),
            ),
            if (_imageFiles[index] != null) // 如果已选择图片，则显示删除按钮
              IconButton(
                icon: const Icon(Icons.delete, color: Colors.red),
                onPressed: () => _removeImage(index), // 点击删除图片
              ),
          ],
        ),
        TextFormField(
          initialValue: _imageNames[index],
          decoration: const InputDecoration(
            labelText: '请输入资质名称',
            border: OutlineInputBorder(),
          ),
          onChanged: (value) => _saveImageName(index, value),
        ),
      ],
    );
  }

  // 添加新的图片上传区域
  void _addImageUploadArea() {
    setState(() {
      _imageFiles.add(null);
      _imageNames.add('');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(padding: const EdgeInsets.all(10.0),
    child:  Column(
      children: <Widget>[
        ...List.generate(_imageFiles.length, (index) => _buildImageUploadArea(index)),
        ElevatedButton(
          onPressed: _addImageUploadArea,
          style: ElevatedButton.styleFrom(
            primary: Colors.blue,
            onPrimary: Colors.white,
          ), // 添加新的图片上传区域
          child: const Text('添加更多资质'),
        ),
      ],
    ) ,
    );
  }
}